<template>
  <div class="clue-pool-container">
    <!-- 搜索筛选区域 -->
    <div class="search-filter">
      <div class="filter-row">
        <el-input v-model="searchForm.clueId" placeholder="线索ID: 请输入" clearable class="search-input" />
        <el-input v-model="searchForm.phone" placeholder="手机号: 请输入" clearable class="search-input" />
        <el-select v-model="searchForm.source" placeholder="渠道来源: 请选择" clearable class="search-select">
          <el-option label="请选择" value="" />
          <el-option label="线上活动" value="online_activity" />
          <el-option label="推广介绍" value="promotion" />
        </el-select>
        <el-button type="primary" @click="search" class="search-btn">搜索</el-button>
        <el-button @click="reset" class="reset-btn">重置</el-button>
      </div>
    </div>

    <!-- 线索列表 -->
    <div class="clue-table-wrapper">
      <el-table
        v-loading="loading"
        :data="clueList"
        style="width: 100%"
        row-key="id"
      >
        <el-table-column prop="id" label="线索ID" width="80" align="center" />
        <el-table-column prop="phone" label="手机号" width="150" align="center" />
        <el-table-column prop="customerName" label="客户姓名" width="100" align="center" />
        <el-table-column prop="gender" label="性别" width="80" align="center">
          <template #default="scope">
            {{ scope.row.gender === 'male' ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="80" align="center" />
        <el-table-column prop="activityInfo" label="活动信息" align="center" />
        <el-table-column prop="createTime" label="创建时间" width="200" align="center" />
        <el-table-column prop="updateTime" label="更新时间" width="200" align="center" />
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="scope">
            <el-button type="text" @click="viewClue(scope.row)" class="view-btn">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <div class="total-info">共 {{ pagination.total }} 条记录 第 {{ pagination.currentPage }} / {{ totalPages }} 页</div>
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50]"
        layout="prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <div class="page-size-select">
        <span>{{ pagination.pageSize }}条/页</span>
        <el-select
          v-model="pagination.pageSize"
          :popper-class="'page-size-popper'"
          @change="handleSizeChange"
          class="page-size-select-inner"
        >
          <el-option
            v-for="size in [10, 20, 50]"
            :key="size"
            :label="size + '条/页'"
            :value="size"
          />
        </el-select>
      </div>
      <div class="jump-to">
        <span>跳至</span>
        <el-input
          v-model.number="jumpPage"
          type="number"
          :min="1"
          :max="totalPages"
          class="jump-input"
          @change="jumpToPage"
        />
        <span>页</span>
      </div>
    </div>

    <!-- 查看线索对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      :title="`查看线索(线索ID:${currentClue.id})`"
      width="600px"
      @close="handleDialogClose"
    >
      <div class="dialog-content">
        <div class="info-row">
          <div class="info-item">
            <label class="info-label">手机号</label>
            <el-input v-model="currentClue.phone" disabled />
          </div>
          <div class="info-item">
            <label class="info-label">渠道来源</label>
            <el-select v-model="currentClue.source" disabled>
              <el-option label="线上活动" value="online_activity" />
              <el-option label="推广介绍" value="promotion" />
            </el-select>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <label class="info-label">活动信息</label>
            <el-select v-model="currentClue.activityInfo" disabled>
              <el-option label="活动信息" value="activity_info" />
            </el-select>
          </div>
          <div class="info-item">
            <label class="info-label">客户姓名</label>
            <el-input v-model="currentClue.customerName" disabled />
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <label class="info-label">性别</label>
            <el-select v-model="currentClue.gender" disabled>
              <el-option label="男" value="male" />
              <el-option label="女" value="female" />
            </el-select>
          </div>
          <div class="info-item">
            <label class="info-label">年龄</label>
            <el-input v-model="currentClue.age" disabled />
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <label class="info-label">微信号</label>
            <el-input v-model="currentClue.wechat" disabled />
          </div>
          <div class="info-item">
            <label class="info-label">QQ</label>
            <el-input v-model="currentClue.qq" disabled />
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <label class="info-label">意向学科</label>
            <el-select v-model="currentClue.intentionSubject" disabled>
              <el-option label="AI智能应用开发(Java)" value="ai_java" />
            </el-select>
          </div>
          <div class="info-item">
            <label class="info-label">意向等级</label>
            <el-select v-model="currentClue.intentionLevel" disabled>
              <el-option label="请选择" value="" />
            </el-select>
          </div>
        </div>
      </div>

      <!-- 跟进历史 -->
      <div class="follow-history">
        <h3>跟进历史</h3>
        <el-table
          :data="currentClue.followHistory"
          style="width: 100%"
          size="small"
        >
          <el-table-column prop="intentionLevel" label="意向等级" />
          <el-table-column prop="intentionSubject" label="意向学科" />
          <el-table-column prop="follower" label="跟进人" />
          <el-table-column prop="followTime" label="跟进时间" width="150" />
          <el-table-column prop="nextFollowTime" label="下次跟进时间" width="150" />
          <el-table-column prop="followRecord" label="跟进记录" />
        </el-table>
      </div>

      <template #footer>
        <el-button @click="handleDialogClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const loading = ref(false)
const clueList = ref([])
const searchForm = reactive({
  clueId: '',
  phone: '',
  source: ''
})

// 分页相关
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 400
})
const jumpPage = ref(1)
const totalPages = computed(() => Math.ceil(pagination.total / pagination.pageSize))

// 对话框相关
const viewDialogVisible = ref(false)
const currentClue = reactive({
  id: '',
  phone: '',
  source: '',
  activityInfo: '',
  customerName: '',
  gender: '',
  age: '',
  wechat: '',
  qq: '',
  intentionSubject: '',
  intentionLevel: '',
  followHistory: []
})

// 生成模拟数据
const generateMockClueList = () => {
  const clues = []
  const sources = ['online_activity', 'promotion']
  const activities = ['线上活动-双11', '推广介绍']
  
  // 生成400条模拟数据
  for (let i = 1; i <= 400; i++) {
    clues.push({
      id: String(i),
      phone: `1893****099`,
      customerName: ['莉莉', '张三', '杨十七', '钱多多', '钱三强', '李洪武'][Math.floor(Math.random() * 6)],
      gender: Math.random() > 0.5 ? 'male' : 'female',
      age: Math.floor(Math.random() * 30) + 20,
      activityInfo: activities[Math.floor(Math.random() * activities.length)],
      createTime: '2016-09-21 08:50:08',
      updateTime: '2016-09-21 08:50:08'
    })
  }
  
  return clues
}

// 生成模拟跟进历史
const generateMockFollowHistory = () => {
  return [
    {
      intentionLevel: '打算考，考虑中',
      intentionSubject: 'AI智能应用开发(Java)',
      follower: '张三',
      followTime: '2025-03-25 10:03:00',
      nextFollowTime: '2025-03-30 12:00:00',
      followRecord: '正在考虑中'
    },
    {
      intentionLevel: '打算考，考虑中',
      intentionSubject: 'AI智能应用开发(Java)',
      follower: '张三',
      followTime: '2025-02-24 10:00:00',
      nextFollowTime: '2025-05-01 10:00:00',
      followRecord: '有意向，计划中'
    }
  ]
}

// 模拟数据
const mockClueList = generateMockClueList()

// 生命周期
onMounted(() => {
  loadClueList()
})

// 方法
const loadClueList = () => {
  loading.value = true
  // 模拟API调用
  setTimeout(() => {
    // 计算分页数据
    const start = (pagination.currentPage - 1) * pagination.pageSize
    const end = start + pagination.pageSize
    clueList.value = mockClueList.slice(start, end)
    loading.value = false
  }, 500)
}

const search = () => {
  // 重置页码
  pagination.currentPage = 1
  jumpPage.value = 1
  
  loading.value = true
  setTimeout(() => {
    // 简单的模拟搜索逻辑
    let filteredList = [...mockClueList]
    
    if (searchForm.clueId) {
      filteredList = filteredList.filter(item => item.id.includes(searchForm.clueId))
    }
    
    if (searchForm.phone) {
      filteredList = filteredList.filter(item => item.phone.includes(searchForm.phone))
    }
    
    if (searchForm.source) {
      filteredList = filteredList.filter(item => {
        const sourceMap = {
          'online_activity': '线上活动',
          'promotion': '推广介绍'
        }
        return item.activityInfo.includes(sourceMap[searchForm.source] || '')
      })
    }
    
    // 更新分页数据
    pagination.total = filteredList.length
    const start = 0
    const end = pagination.pageSize
    clueList.value = filteredList.slice(start, end)
    loading.value = false
  }, 500)
}

const reset = () => {
  // 清空搜索条件
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  // 重置页码
  pagination.currentPage = 1
  jumpPage.value = 1
  pagination.total = 400
  loadClueList()
}

const viewClue = (row) => {
  // 设置当前查看的线索
  Object.assign(currentClue, {
    ...row,
    source: row.activityInfo.includes('线上活动') ? 'online_activity' : 'promotion',
    wechat: 'wx2738493',
    qq: '23378273823',
    intentionSubject: 'ai_java',
    intentionLevel: '',
    followHistory: generateMockFollowHistory()
  })
  viewDialogVisible.value = true
}

const handleDialogClose = () => {
  viewDialogVisible.value = false
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  pagination.currentPage = 1
  jumpPage.value = 1
  loadClueList()
}

const handleCurrentChange = (current) => {
  pagination.currentPage = current
  jumpPage.value = current
  loadClueList()
}

const jumpToPage = () => {
  let page = parseInt(jumpPage.value)
  if (isNaN(page) || page < 1) {
    page = 1
  } else if (page > totalPages.value) {
    page = totalPages.value
  }
  pagination.currentPage = page
  jumpPage.value = page
  loadClueList()
}
</script>

<style scoped>
.clue-pool-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 搜索筛选区域 */
.search-filter {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-row {
  display: flex;
  gap: 15px;
  align-items: end;
  flex-wrap: wrap;
}

.search-input {
  width: 250px;
}

.search-select {
  width: 200px;
}

/* 表格样式 */
.clue-table-wrapper {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

/* 分页 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 10px;
}

.total-info {
  color: #606266;
}

.page-size-select {
  display: flex;
  align-items: center;
  gap: 5px;
}

.page-size-select-inner {
  width: auto;
}

.page-size-popper {
  min-width: 120px;
}

.jump-to {
  display: flex;
  align-items: center;
  gap: 5px;
}

.jump-input {
  width: 80px;
}

/* 查看按钮 */
.view-btn {
  color: #67c23a;
}

.view-btn:hover {
  color: #85ce61;
}

/* 对话框样式 */
.dialog-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  gap: 20px;
}

.info-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.info-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

/* 跟进历史 */
.follow-history {
  margin-top: 20px;
}

.follow-history h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #303133;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .filter-row {
    flex-wrap: wrap;
  }
  
  .search-input,
  .search-select {
    width: calc(50% - 10px);
    min-width: 200px;
  }
  
  .pagination {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .search-input,
  .search-select {
    width: 100%;
  }
  
  .info-row {
    flex-direction: column;
  }
}
</style>